import React from 'react';


class ErrorBoundary extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            hasError: false,
            error: ""
        };
    }

    componentDidCatch(error, info) {
        this.setState({
            hasError: true,
            error: error
        });
        console.log("ErrorBoundary!!!");
    }

    render() {
        if (this.state.hasError) {
            return <h1>{this.state.error.toString()}</h1>;
        }
        return this.props.children;
    }
}



class ErrorDemo extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        throw new Error('I crashed!');
        return (
            <div>No Error</div>
        );
    }
}

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {};
    }

    render() {
        return (
            <ErrorBoundary>
                <ErrorDemo />
            </ErrorBoundary>
        );
    }
}

//尽管报错 但还显示
export default App;

//如果直接返回则页面报错不显示
// export default ErrorDemo;